2 03 Django Templates | ✅저자: 이유정(박사)
🔹 템플릿이란?
- 사용자가 웹사이트를 방문했을 때 화면에 보여지는 HTML 코드를 말합니다.
- Django 템플릿 시스템은 HTML에 변수, 조건문, 반복문 등 프로그래밍 요소를 넣을 수 있게 도와줍니다.
- 백엔드에서 만든 데이터를 템플릿에 넘겨주면, 사용자가 볼 수 있는 동적인 웹페이지가 만들어집니다.
✅ 1단계: 템플릿 파일 만들기
앱 폴더 안에 templates/ 폴더를 만들고, 그 안에 HTML 파일을 생성합니다.
polls/
├── templates/
│ └── polls/
│ └── index.html
파일 이름은 보통 앱 이름/파일명.html 구조로 합니다.
✅ 2단계: 템플릿 작성 (HTML + Django 문법)
<!-- polls/templates/polls/index.html -->
<!DOCTYPE html>
<html>
<head>
<title>투표 앱</title>
</head>
<body>
<h1>안녕하세요, {{ user_name }}님!</h1>
<ul>
{% for fruit in items %}
<li>{{ fruit.name }} - {{ fruit.color }}</li>
# 위의 코드는 <li>사과 - 빨강</li> 이것과 같음
{% endfor %}
</ul>
</body>
</html>
{{ user_name }}: 뷰에서 넘겨준 데이터를 출력{% for item in items %}: 리스트 데이터를 반복 출력
! 탭으로 html이 생성이 안될경우
✅ 3단계: views.py에서 템플릿 렌더링
from django.shortcuts import render
def index(request):
context = {
'user_name': '홍길동',
'items': [
{'name': '사과', 'color': '빨강'},
{'name': '바나나', 'color': '노랑'},
{'name': '오렌지', 'color': '주황'},
],
}
return render(request, 'polls/index.html', context)
render()함수는 HTML 템플릿에 데이터를 넣고, 최종 HTML 결과를 만들어 사용자에게 응답합니다.
🔹 템플릿 시스템 핵심 기능
| 기능 | 설명 |
|---|---|
{{ 변수 }} |
파이썬에서 전달한 데이터 출력 |
{% if %} ~ {% endif %} |
조건문 처리 |
{% for %} ~ {% endfor %} |
반복문 처리 |
{% url 'name' %} |
URL 이름으로 링크 연결 |
{% include "파일.html" %} |
다른 템플릿 파일 불러오기 |
{% extends "기본.html" %} |
템플릿 상속 구조 설정 |
🔹 템플릿 상속 예시: base.html (공통 틀)
<!DOCTYPE html>
<html>
<body>
<h1>사이트 제목</h1>
{% block content %}
{% endblock %}
</body>
</html>
index.html (개별 페이지):
{% extends "polls/base.html" %}
{% block content %}
<p>여기에 메인 내용이 들어갑니다.</p>
{% endblock %}
- 이렇게 하면 사이트 전체 디자인을 통일시키면서, 각 페이지의 내용만 다르게 관리할 수 있습니다.
🔷 {{ ... }} : 변수 출력
{{ }}안에는 뷰에서 전달된 데이터를 출력하는 데 사용됩니다.- HTML 안에 Python 코드를 직접 넣을 수 없기 때문에 이렇게 표현합니다.
<h1>안녕하세요, {{ user_name }}님!</h1>
user_name은 views.py에서 넘긴 값입니다.
🔷 {% 템플릿 태그 %} : 제어문 (반복, 조건 등)
{% %}안에는 반복문, 조건문, include, extends 같은 템플릿 태그가 들어갑니다.- 화면에 직접 출력하지 않고, 흐름을 제어하거나 구조를 만드는 역할을 합니다. 반복문, 조건문, 템플릿 상속 등에 사용됩니다.
</> 예시코드: 반복문
<ul>
{% for fruit in items %}
<li>{{ fruit }}</li>
{% endfor %}
</ul>
</> 예시코드: 조건문
{% if is_logged_in %}
<p>환영합니다!</p>
{% else %}
<p>로그인해주세요.</p>
{% endif %}
🔷 필터 (Filters) — | 기호 사용
- 변수에 기본적인 가공 처리를 적용할 수 있는 기능입니다.
- 변수 뒤에
|필터이름형식으로 사용합니다.
# 소문자를 대문자로 바꾸기
{{ user_name|upper }}
# 리스트 개수 출력
{{ fruits|length }}
✨ 요약:
{{ }} → 값을 화면에 출력할 때
{% %} → 조건문, 반복문 등 로직을 제어할 때
|필터 : 데이터를 "변형/가공"
</> 예시코드: views.py
from django.shortcuts import render
def show_message(request):
message = "안녕하세요, 장고!"
return render(request, 'hello.html', {'message': message})
message는 함수 내부의 지역 변수입니다.- 그냥 만들어두기만 해서는 템플릿에서 사용할 수 없고,
- 반드시
render()함수의 context 딕셔너리로 전달해야 합니다:
→{'message': message}
hello.html
<!DOCTYPE html>
<html>
<head>
<title>메시지 출력</title>
</head>
<body>
<h1>{{ message }}</h1>
</body>
</html>
- 이렇게 하면
{{ message }}는views.py에서 넘긴"안녕하세요, 장고!"로 치환되어 출력됩니다.
🔷 Django 템플릿에서 {% url %} 태그 사용법
◽ {% url %} 태그란?
Django 템플릿에서 URL을 직접 하드코딩하지 않고, urls.py에 등록된 URL 이름(name)을 이용해서 동적으로 경로를 생성할 수 있게 해주는 기능입니다.
📖 문법, 구문(syntax):
{% url 'url_이름' %}
</> 예시:
<a href="{% url 'index' %}">홈으로</a>
'index'는urls.py에서 설정한 name 값입니다.
🔷 URL에 인자(argument)가 필요한 경우
</> 예시:
# polls/urls.py
path('question/<int:question_id>/', views.detail, name='detail')
<int:question_id>는 URL 경로에 변수 값을 받는 형태입니다.
◽ path('question/<int:question_id>/')의 의미
- URL에 숫자 값을 변수로 받는다는 의미입니다.
- 예:
/question/5/처럼 들어오면question_id = 5로 뷰 함수에 전달됩니다.
# urls.py
path('question/<int:question_id>/', views.detail, name='detail')
# views.py
def detail(request, question_id):
◽ 이렇게 사용하는 이유는?
<a href="/polls/"> : 경로가 바뀌면 HTML 코드도 일일이 수정해야 합니다.
<a href="{% url 'index' %}"> : 경고가 바뀌어도 name만 유지되면 자동 반영 됩니다.
/c/6827e190-106c-8006-b629-614597d0af5b
위의 이미지 주소와 같이 /c/6827e190-106c-8006-b629-614597d0af5b처럼 보이는 구조는 Django의
path('c/<str:chat_id>/', views.some_view)
처럼 해석할 수 있는 구조입니다.
Python 코드 실행기
